import { useMemo } from "react";
import { useState, useRef } from "react";
import { isTemplateExpression } from "typescript";
import TodoInput from "./todoInput";
import TodoList from "./todoList";
import TodoOptions from "./todoOption";

//data的类型
export type Item = {
    id: string;
    todo: string;
    completed: boolean;
}


let initialState:Array<Item> = [
    {
        id:'1',
        todo:'学react',
        completed: false,
    },
    {
        id:'2',
        todo:'学ts',
        completed: true
    },
]

 //枚举三个状态
export enum status{
    all=0,
    completed=1,
    unCompleted=2

}


const Container = () => {
    //列表数据
    let [data,setData] = useState<Array<Item>>(initialState);

   
    //声明选项状态
    let [state,setState] = useState<status>(status.all)

    //数量统计
    let [counts,setCounts] = useState<Array<number>>([])
    
//声明TodoInput组件中输入框的状态
let [val,setVal] = useState<string>('')
//一个函数,用于让TodoInput组件将输入值回传到当前父组件
// let handleInputChange = (val:string)=>{
//     // console.log(val);
//     setVal(val)
// }

//声明Ref
const ipt = useRef<string | null >(null)

//传递一个函数给子组件TodoInput,在TodoInput点击提交按钮触发
let addTodo = ()=>{
    // console.log(ipt);
    //声明一个对象
    let item:Item = {
        id: Math.random().toString(32).substring(2),
        todo:ipt.current!,
        completed: false,
    }

    //添加逻辑
    setData([item,...data])
}

//删除
let del = (id:string)=>{
    console.log(id);
    //在data中过滤掉id和传入id相同的选项

    let newData = data.filter((item:Item)=>{
        return item.id !== id
    })
    setData(newData)
}

//勾选
let checkIn = (checked:boolean,id:string)=>{
    console.log(checked);
    console.log(id);
    //通过id到data中找到对应的数据,把completed变成checked

    let target:Item | undefined = data.find((item:Item)=>{
        return item.id === id
    }) 
    
    // console.log(target);
    target!.completed=checked

    setData([...data])
}

//选项按钮的切换
let changeState = (status:status)=>{
    console.log(status);
    setState(status);
}

//使用缓存钩子 (计算属性)
let filterData = useMemo<Array<Item> | undefined>(()=>{
    switch (state) {
        case 0:
        //返回全部
            return [...data]
        case 1:
        //已完成
            return data.filter((item:Item)=>{
                return item.completed
            })
        case 2:
        //未完成
            return data.filter((item:Item)=>{
                return !item.completed
            })
    }
},[state,data])

//计算数量
let countsArr = useMemo<Array<number>>(()=>{
    //全部的数量
    let all:number = data.length
    //已完成数量
    let completed:number = (data.filter((item:Item)=>{
        return item.completed
        })).length

    //未完成数量
    let unCompleted:number = (data.filter((item:Item)=>{
        return !item.completed
    })).length

    return [all,completed, unCompleted]

},[data])
  
console.log(countsArr);


  return (
    <fieldset>
      <legend>容器组件</legend>
      <TodoInput ref={ipt} onAddTodo={addTodo} />
      <TodoList data={filterData} onDel={del} onCheckIn={checkIn} />
      <TodoOptions countsArr={countsArr} onChangeState={changeState} />
    </fieldset>
  );
};

export default Container;
